<template>
  <div class="w-full h-full mt-[70px] no-scrollbar">
    <!-- PC端 -->
    <section class="w-full hidden md:flex mb-[16px] direction-column">
      <div class="w-full flex justify-center relative">
        <el-image class="w-[100%] h-[658px]" :src="bgImgPath?.bgImg26" lazy />
        <div
          class="w-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center p-4">
          <div class="text-white text-center">
            <div class="text-[70px] md:text-[85px] font-bold text-[#ff6839]">
              {{ homeConfig?.title }}
            </div>
            <div class="text-[50px] md:text-[50px] font-bold text-white text-[#ff6839] tracking-wider drop-shadow-lg">
              {{ homeConfig?.englishTitle }}
            </div>
            <div class="text-[50px] md:text-[50px] colors-primary-900">
              {{ homeConfig?.subtext }}
            </div>
          </div>
        </div>
      </div>
      <div class="w-full flex justify-center items-center relative  bg-[#f2f2f2]">
        <div class="w-full container flex flex-direction-column-start p-4">
          <div class="flex justify-center items-center">
            <div class="hexagon-white">
              <el-image :src="iconPath?.icon10" lazy />
            </div>
            <div class="ml-[20px]">
              <div class="text-[25px] font-bold text-blue-600">
                {{ homeConfig?.Enterprise[0].title }}
              </div>
              <div class="text-[15px] font-bold text-gray-600 mt-2.5">
                {{ homeConfig?.Enterprise[0].content }}
              </div>
            </div>
          </div>
          <div class="flex justify-center items-center ml-[220px]">
            <div class="hexagon">
              <div class="hexagon-content">
                <el-image class="w-40" :src="iconPath?.icon6" lazy />
              </div>
            </div>
            <div class="ml-[20px]">
              <div class="text-[25px] font-bold text-blue-600">
                {{ homeConfig?.Enterprise[1].title }}
              </div>
              <div class="text-[15px] font-bold text-gray-600 mt-2.5">
                {{ homeConfig?.Enterprise[1].content }}
              </div>
            </div>
          </div>
          <div class="flex justify-center items-center">
            <div class="hexagon-white">
              <el-image class="w-40" :src="iconPath?.icon7" lazy />
            </div>
            <div class="ml-[20px]">
              <div class="text-[25px] font-bold text-blue-600">
                {{ homeConfig?.Enterprise[2].title }}
              </div>
              <div class="text-[15px] font-bold text-gray-600 mt-2.5">
                {{ homeConfig?.Enterprise[2].content }}
              </div>
              <div class="text-[15px] font-bold text-gray-600 mt-1">
                {{ homeConfig?.Enterprise[2].paratext }}
              </div>
            </div>
          </div>
          <div class="flex justify-center items-center ml-[220px]">
            <div class="hexagon">
              <div class="hexagon-content">
                <el-image class="w-40" :src="iconPath?.icon8" lazy />
              </div>
            </div>
            <div class="ml-[20px]">
              <div class="text-[25px] font-bold text-blue-600">
                {{ homeConfig?.Enterprise[3].title }}
              </div>
              <div class="text-[15px] font-bold text-gray-600 mt-2.5">
                {{ homeConfig?.Enterprise[3].content }}
              </div>
              <div class="text-[15px] font-bold text-gray-600 mt-1">
                {{ homeConfig?.Enterprise[3].paratext }}
              </div>
            </div>
          </div>
          <div class="flex justify-center items-center ">
            <div class="hexagon-white">
              <el-image class="w-40" :src="iconPath?.icon9" lazy />
            </div>
            <div class="ml-[20px]">
              <div class="text-[25px] font-bold text-blue-600">
                {{ homeConfig?.Enterprise[4].title }}
              </div>
              <div class="text-[15px] font-bold text-gray-600 mt-2.5">
                {{ homeConfig?.Enterprise[4].content }}
              </div>
              <div class="text-[15px] font-bold text-gray-600 mt-1">
                {{ homeConfig?.Enterprise[4].paratext }}
              </div>
            </div>
          </div>
          <div class="flex justify-center items-center ml-[220px]">
            <div class="hexagon">
              <div class="hexagon-content flex direction-column text-6xl font-bold text-gray-600">
                <div>時</div>
                <div>達</div>
              </div>
            </div>
            <div class="ml-[20px]">
              <div class="text-[25px] font-bold text-blue-600">
                {{ homeConfig?.Enterprise[5].title }}
              </div>
              <div class="text-[15px] font-bold text-gray-600 mt-2.5">
                {{ homeConfig?.Enterprise[5].content }}
              </div>
              <div class="text-[15px] font-bold text-gray-600 mt-1">
                {{ homeConfig?.Enterprise[5].paratext }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="container flex justify-center relative">
        <div class="w-full p-4 flex justify-center items-center">
          <el-image class="w-[50%]" src="/src/assets/pyramid.png" lazy />
          <div class="w-[50%]">
            <div class="text-[25px] font-bold text-blue-600">
              {{ homeConfig?.chinesefont }}
            </div>
            <div class="text-[15px] text-gray-600 mt-6">
              {{ homeConfig?.chinesefontContent }}
            </div>
            <el-button type="primary" class="mt-14 text-gray-600">{{
              homeConfig?.chinesefontBtn
            }}</el-button>
          </div>
        </div>
      </div> -->
      <div class="flex justify-center relative">
        <div class="w-full container p-4 flex justify-between">
          <div class="w-[30%] flex flex-direction-column">
            <div class="w-[110px] h-[110px] rounded-full bg-[#f2f2f2] flex justify-center items-center">
              <div class="w-[90px] h-[90px] rounded-full bg-[#409eff] flex justify-center items-center">
                <el-image class="w-10" src="/src/assets/icon1.png" lazy />
              </div>
            </div>
            <div class="text-[25px] font-bold text-gray-600">
              {{ homeConfig?.ServiceProcess[0].title }}
            </div>
            <div class="text-[15px] text-gray-600 mt-2.5">
              {{ homeConfig?.ServiceProcess[0].content }}
            </div>
          </div>
          <div class="w-[30%] flex flex-direction-column">
            <div class="w-[110px] h-[110px] rounded-full bg-[#f2f2f2] flex justify-center items-center">
              <div class="w-[90px] h-[90px] rounded-full bg-[#409eff] flex justify-center items-center">
                <el-image class="w-10" src="/src/assets/icon2.png" lazy />
              </div>
            </div>
            <div class="text-[25px] font-bold text-gray-600">
              {{ homeConfig?.ServiceProcess[1].title }}
            </div>
            <div class="text-[15px] text-gray-600 mt-2.5">
              {{ homeConfig?.ServiceProcess[1].content }}
            </div>
          </div>
          <div class="w-[30%] flex flex-direction-column">
            <div class="w-[110px] h-[110px] rounded-full bg-[#f2f2f2] flex justify-center items-center">
              <div class="w-[90px] h-[90px] rounded-full bg-[#409eff] flex justify-center items-center">
                <el-image class="w-10" :src="iconPath?.icon1" lazy />
              </div>
            </div>
            <div class="text-[25px] font-bold text-gray-600">
              {{ homeConfig?.ServiceProcess[2].title }}
            </div>
            <div class="text-[15px] text-gray-600 mt-2.5">
              {{ homeConfig?.ServiceProcess[2].content }}
            </div>
          </div>
        </div>
      </div>
      <div class="flex justify-center relative">
        <div class="w-full container p-4 flex justify-between">
          <div class="w-[30%] flex flex-direction-column">
            <div class="w-[110px] h-[110px] rounded-full bg-[#f2f2f2] flex justify-center items-center">
              <div class="w-[90px] h-[90px] rounded-full bg-[#409eff] flex justify-center items-center">
                <el-image class="w-10" :src="iconPath?.icon2" lazy />
              </div>
            </div>
            <div class="text-[25px] font-bold text-gray-600">
              {{ homeConfig?.ServiceProcess[3].title }}
            </div>
            <div class="text-[15px] text-gray-600 mt-2.5">
              {{ homeConfig?.ServiceProcess[3].content }}
            </div>
          </div>
          <div class="w-[30%] flex flex-direction-column">
            <div class="w-[110px] h-[110px] rounded-full bg-[#f2f2f2] flex justify-center items-center">
              <div class="w-[90px] h-[90px] rounded-full bg-[#409eff] flex justify-center items-center">
                <el-image class="w-10":src="iconPath?.icon1" lazy />
              </div>
            </div>
            <div class="text-[25px] font-bold text-gray-600">
              {{ homeConfig?.ServiceProcess[4].title }}
            </div>
            <div class="text-[15px] text-gray-600 mt-2.5">
              {{ homeConfig?.ServiceProcess[4].content }}
            </div>
          </div>
          <div class="w-[30%] flex flex-direction-column">
            <div class="w-[110px] h-[110px] rounded-full bg-[#f2f2f2] flex justify-center items-center">
              <div class="w-[90px] h-[90px] rounded-full bg-[#409eff] flex justify-center items-center">
                <el-image class="w-10" :src="iconPath?.icon2" lazy />
              </div>
            </div>
            <div class="text-[25px] font-bold text-gray-600">
              {{ homeConfig?.ServiceProcess[5].title }}
            </div>
            <div class="text-[15px] text-gray-600 mt-2.5">
              {{ homeConfig?.ServiceProcess[5].content }}
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 移动端 -->
    <div class="md:hidden">
      <HomeMobile></HomeMobile>
    </div>
    <ContactUs></ContactUs>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";
import { useConfig } from "@/composables/useConfig";
import bgImgPath from "./bgImgPath/index";
import iconPath from "./bgImgPath/iconPath";
import ContactUs from "./ContactUs.vue";
import HomeMobile from "./HomeMobile.vue";

const {
  getHomeConfig,
  getSiteConfig,
  getCommonConfig,
  loadConfig,
  loading,
  error,
  getIconComponent,
  getColorClasses,
} = useConfig();

const homeConfig = computed(() => getHomeConfig());

onMounted(() => {
  loadConfig();
});
</script>

<style scoped>
/* 页面特定样式 */
/* 隐藏所有方向的滚动条 */
.no-scrollbar {
  /* width: 100vw;
  height: calc(100vh); */
  overflow-y: auto;
  -ms-overflow-style: none;
  /* IE/Edge */
  scrollbar-width: none;
  /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}

.direction-column {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 六边形 */
.hexagon {
  width: 220px;
  height: 220px;
  /* 保持正六边形比例 */
  background-color: #3498db;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hexagon-white {
  width: 220px;
  height: 220px;
  /* 保持正六边形比例 */
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* 上层：填充内容的六边形（略小，形成“内边距”效果）*/
.hexagon-content {
  width: calc(100% - 3px);
  /* 减去 2×边框宽度 */
  height: calc(100% - 3px);
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.font-family-Microsoft {
  font-family: Microsoft JhengHei, 微軟正黑體, 微軟雅黑體;
}

.flex-direction-column {
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
}
.flex-direction-column-start {
  flex-direction: column;
  align-items: start;
  justify-content: start;
}
</style>
